<template>
    <el-dialog
            :title="!dataForm.id ? '新增' : '修改'"
            :close-on-click-modal="false"
            :visible.sync="visible">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
                 label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="dataForm.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="dataForm.type" placeholder="请选择">
                    <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="目录url" prop="catalogueUrl">
                <el-input v-model="dataForm.catalogueUrl" placeholder="目录url"></el-input>
            </el-form-item>
          <span style="color: red"><b>注意：</b>使用完全一个完整的单元的字符集合，最好不包含空格</span>
            <el-form-item label="目录规则" prop="catalogueRule">
                区间前置规则(多个，隔开)：<el-input v-model="catalogueRule.areaPreList" placeholder=""></el-input>
                区间后置规则(多个，隔开)：<el-input v-model="catalogueRule.areaPostList" placeholder=""></el-input>
                内容前置规则(单个)：<el-input v-model="catalogueRule.dataPre" placeholder=""></el-input>
                内容居中规则(单个)：<el-input v-model="catalogueRule.dataCenter" placeholder=""></el-input>
                内容后置规则(单个)：<el-input v-model="catalogueRule.dataPost" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="内容规则" prop="contentRule">
                区间前置规则(多个，隔开)：<el-input v-model="contentRule.areaPreList" placeholder=""></el-input>
                区间后置规则(多个，隔开)：<el-input v-model="contentRule.areaPostList" placeholder=""></el-input>
                内容替换规则(多个，隔开；键值对-配对)：<el-input v-model="contentRule.replaceCondition" placeholder=""></el-input>
            </el-form-item>

            <el-button type="primary" @click="check()">校验规则</el-button>

            <el-collapse>
              <el-collapse-item v-for="(res,index) in checkData" :title="'序号：'+index" :name="index">
                <div>{{res}}</div>
              </el-collapse-item>
            </el-collapse>

        </el-form>

        <hr>
        <div>
            <h4>解析url路径数据，得到html实际构造，后续用于数据规则解析</h4>
            <el-input placeholder="请输入数据url路径" v-model="parseUrl"></el-input><el-button @click="parse">解析</el-button>
            <p>{{parseData}}</p>
        </div>

        <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                dataForm: {
                    id: 0,
                    name: '',
                    type: '',
                    catalogueUrl: '',
                    catalogueRule: '',
                    contentRule: ''
                },
                dataRule: {
                    name: [
                        {required: true, message: '名称不能为空', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '类型：0，新闻（目录即文章名） 1，小说（文章目录）不能为空', trigger: 'blur'}
                    ],
                    catalogueUrl: [
                        {required: true, message: '目录url不能为空', trigger: 'blur'}
                    ],
                    catalogueRule: [
                        {required: true, message: '目录规则不能为空', trigger: 'blur'}
                    ],
                    contentRule: [
                        {required: true, message: '内容规则不能为空', trigger: 'blur'}
                    ]
                },

                typeOptions: [
                    {value:0,label:'新闻'},
                    {value:1,label:'小说'},
                ],

                //目录规则
                catalogueRule:{
                    areaPreList:'',
                    areaPostList:'',
                    dataPre:'',
                    dataCenter:'',
                    dataPost:'',
                },
                //内容规则
                contentRule:{
                    areaPreList:'',
                    areaPostList:'',
                    replaceCondition:'',
                },

                //工具解析参数
                parseData:"",
                parseUrl:"",
                checkData:[],
            }
        },
        watch:{
            catalogueRule:{//深度监听，可监听到对象、数组的变化
                handler(val, oldVal){
                    this.dataForm.catalogueRule = JSON.stringify(val || '');
                },
                deep:true //true 深度监听
            },
            contentRule:{//深度监听，可监听到对象、数组的变化
                handler(val, oldVal){
                    this.dataForm.contentRule = JSON.stringify(val || '');
                },
                deep:true //true 深度监听
            }
        },
        methods: {
            init(id) {
                this.dataForm.id = id || 0
                this.visible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].resetFields()
                    if (this.dataForm.id) {
                        this.$api.DataTask.info(this.dataForm.id).then((data) => {
                            if (data && data.code === 0) {
                                this.dataForm.name = data.dataTask.name
                                this.dataForm.type = data.dataTask.type
                                this.dataForm.catalogueUrl = data.dataTask.catalogueUrl
                                this.dataForm.catalogueRule = data.dataTask.catalogueRule
                                this.dataForm.contentRule = data.dataTask.contentRule

                                //赋值表单
                                this.catalogueRule = JSON.parse(data.dataTask.catalogueRule || '{}');
                                this.contentRule = JSON.parse(data.dataTask.contentRule || '{}');
                            }
                        })
                    }
                })
            },
            // 表单提交
            dataFormSubmit() {
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {

                        let data = {
                            'id': this.dataForm.id || undefined,
                            'name': this.dataForm.name,
                            'type': this.dataForm.type,
                            'catalogueUrl': this.dataForm.catalogueUrl,
                            'catalogueRule': this.dataForm.catalogueRule,
                            'contentRule': this.dataForm.contentRule
                        }

                        let resultAction;
                        if (!this.dataForm.id) {
                            resultAction = this.$api.DataTask.save(data);
                        } else {
                            resultAction = this.$api.DataTask.update(data);
                        }

                        resultAction.then((data) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.visible = false
                                        this.$emit('refreshDataList')
                                    }
                                })
                            } else {
                                this.$message.error(data.msg)
                            }
                        })
                    }
                })
            },

            //解析url
            parse(){
                this.$api.DataTask.parse(this.parseUrl).then((data) => {
                    if (data && data.code === 0) {
                        this.parseData = data.data;
                    }else{
                        this.$message.error(data.msg)
                    }
                });
            },

            //检测配置规则
            check(){
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.checkData = [];
                        let data = {
                            'id': this.dataForm.id || undefined,
                            'name': this.dataForm.name,
                            'type': this.dataForm.type,
                            'catalogueUrl': this.dataForm.catalogueUrl,
                            'catalogueRule': this.dataForm.catalogueRule,
                            'contentRule': this.dataForm.contentRule
                        }

                        this.$api.DataTask.check(data).then((data) => {
                            if (data && data.code === 0) {
                                this.checkData = data.data;
                            }else{
                                this.$message.error(data.msg)
                            }
                        });

                    }
                })


            },
        }
    }
</script>
